<template>
  <div>
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="45%"
      @close="form = {}"
    >
      <el-form
        ref="form"
        :rules="rules"
        :model="form"
        :inline="true"
        label-width="80px"
      >
        <el-form-item prop="subject_id" label="归属学科">
          <el-select v-model="form.subject_id" placeholder="归属学科">
            <el-option
              v-for="item in sub"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="directory_id" label="归属目录">
          <el-select v-model="form.directory_id" placeholder="归属目录">
            <el-option
              v-for="item in directoryList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="标签名称" prop="tag_name">
          <el-input
            placeholder="请输入标签名称"
            v-model="form.tag_name"
          ></el-input>
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input-number
            v-model="form.sort"
            :min="1"
            :max="1000"
            label="描述文字"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="是否显示" prop="is_show">
          <el-switch
            v-model="form.is_show"
            :active-value="1"
            :inactive-value="2"
            active-text="是"
            inactive-text="否"
          >
          </el-switch>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="btnOK">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  showTagdirectory,
  newTagdirectory,
  allDirectory,
  editTagdirectory,
  getTagAllNews,
  showSubject,
} from "@/api/subject";

export default {
  name: "addTag",

  data() {
    return {
      dialogVisible: false,
      form: {
        sort: 10,
        subject_id: "",
        directory_id: "",
        tag_name: "",
      },
      rules: {
        subject_name: [{ required: true, message: "必填", trigger: "blur" }],
        directory_name: [{ required: true, message: "必填", trigger: "blur" }],
        is_show: [
          {
            required: true,
            message: "默认显示",
            trigger: "blur",
          },
        ],
        sort: [
          {
            required: true,
            message: "不能小于1",
            trigger: "blur",
          },
        ],
      },

      sub: [],
      tableData: [],
      subjectValue: "",
      dictValue: "",
      id: "",
    };
  },
  computed: {
    title() {
      return this.form.id ? "修改" : "添加";
    },
    directoryList() {
      // 目录信息
      if (!this.form.subject_id) {
        return [];
      } else {
        // eslint-disable-next-line vue/no-side-effects-in-computed-properties
        this.form.directory_id = "";
        const result = this.sub.find((val) => val.id == this.form.subject_id);
        return result.children;
      }
    },
  },
  methods: {
    async huixian(row) {
      console.log(row.id);
      this.id = row.id;
      let { data } = await showTagdirectory(row.id);
      console.log(data);
      this.form = data;

      var res = this.tableData.filter(function (item) {
        return item.id == row.id;
      });
      console.log(res);

      this.dialogVisible = true;
    },

    async huoqu() {
      let { data } = await allDirectory();

      this.sub = data;
    },
    handleChange(value) {
      console.log(value);
    },
    async btnOK() {
      this.$refs.form.validate();
      if (this.form.id) {
        await editTagdirectory({
          ...this.form,
          id: this.id,
        });
      } else {
        await newTagdirectory({
          ...this.form,
        });
      }
      this.$message.success("成功");
      this.$emit("update");

      this.dialogVisible = false;
    },
  },
  created() {
    this.huoqu();
    this.initData();
  },
};
</script>

<style></style>